<template>
  <div class="strategy-wrapper">
    <!-- <v-header :showBackground="false" :fixed="true" :fontColor="headerStyles.color" :customBackground="headerStyles.background">
      <div slot="right" class="header-right">
        <span v-if="catalogList.length > 0" @click.stop="showCatalog = true" style="padding-right: 9px; border-right: 1px solid #666;">目录 <i class="icon iconfont icon-sort"></i></span>
        <span @click.stop="toOpenMenu" class="more"><i class="icon iconfont icon-more1"></i></span>
      </div>
    </v-header> -->
    <template v-if="!isLoadFail">
      <scroll
        ref="scroll"
        :bounce="false"
        :scrollBar="true"
        :probeType="3"
        :listenScroll="true"
        @scroll="scroll"
        style="height: 100%;"
        :data="travels.articleContent">
        <div v-if="travels">
          <!-- 头图 -->
          <div class="firstImg" v-if="travels.firstImg" :style="{backgroundImage: 'url('+travels.firstImg+')'}">
          </div>
          <!-- 标题 -->
          <div class="travels-title">{{travels.title}}</div>
          <!-- 发表时间 -->
          <p style="padding: 0 12px; font-size: 13px; margin-bottom: 12px;">
            <span>发表于 {{travels.publishTime}}</span>
            <span style="margin-left: 18px;margin-right: 2px">{{travels.browseCount}} 浏览</span>
            <b>·</b>
            <span v-if="travels.articleType == 0" style="margin-left: 6px">{{travels.commentCount}} 回复</span>
            <span v-else style="margin-left: 6px">{{travels.collectionSum}} 收藏</span>
          </p>
          <!-- 用户信息及地址 -->
          <div class="authorInfo">
            <div class="user">
              <img :src="travels.userHeadUrl"  @click.stop="toMyInfo(travels.publishUserId)" />
              <div class="info">
                <p>{{travels.userName}}</p>
                <p style="font-size: 13px; font-weight: 100; color: #666;">{{playStrategyCount + '篇游记'}}，{{travels.userFollow}}个粉丝</p>
              </div>
            </div>
            <div class="address">{{travels.addressName}}</div>
          </div>
          <!-- 出行信息 -->
          <div class="travelInfo" v-if="travels.articleType === 0 && travels.travelTime && travels.numberOfDays">
            <div class="item" style="width: 60%"><i class="icon iconfont icon-time"></i> 出发时间 {{travels.travelTime}}</div>
            <div class="item" style="width: 35%"><i class="icon iconfont icon-user"></i> 人物 &nbsp;&nbsp;&nbsp;{{travels.figure}}</div>
            <div class="item" style="width: 60%"><i class="icon iconfont icon-money"></i> 人均费用 {{travels.thePerCapitaCost}}</div>
            <div class="item" style="width: 35%"><i class="icon iconfont icon-calendar"></i> 出行天数 {{travels.numberOfDays}}</div>
          </div>
          <!-- 内容区域 -->
          <div class="travels-content" v-if="travels.articleContent && travels.articleContent.length > 1">
            <div>
              <template v-for="(item, index) in travels.articleContent">
                <p :key="index" v-if="item.type == 1" class="block text">{{item.content}}</p>
                <img :key="index" v-else-if="item.type == 2" v-lazy="item.content" @click="toShowAtlas(index)"/>
                <p :key="index" v-else-if="item.type == 3" class="block section" :id="'section' + index">{{item.content}}</p>
              </template>
            </div>
          </div>
          <!-- 版权信息 -->
          <div style="font-size: 14px; margin-top: 50px; margin-bottom: 20px; text-align: center; color: #666;">
            <p>本{{travels.articleType === 0 ? '游记' : '攻略'}}著作权归“{{travels.userName}}”所有</p>
            <p>任何形式转载请联系作者</p>
            <p style="font-size: 12px; color: #444; margin-top: 12px;">- THE END -</p>
          </div>
          <!-- 个人信息 -->
          <div class="authorInfo" style="border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;">
            <div class="user">
              <img :src="travels.userHeadUrl" @click.stop="toMyInfo(travels.publishUserId)" />
              <div class="info" style="border: none;">
                <p>{{travels.userName}}</p>
                <p style="font-size: 13px; font-weight: 100; color: #666;">{{playStrategyCount + '篇' + (travels.articleType == 0 ? '游记' : '攻略')}}，{{travels.userFollow}}个粉丝</p>
              </div>
            </div>

            <!-- <transition name="bounce" enter-active-class="" leave-active-class="bounceOut"> -->
              <div class="litter-button" v-if="!isMe && followStatus != 1 && !isFriend" @click.stop="changeFollowStatus(travels.publishUserId)">
                <i class="fa fa-plus" aria-hidden="true" style="margin-right: 2px;"></i>好友
              </div>
            <!-- </transition> -->
          </div>
          <div style="height: 15px; background: #f0f0f0;"></div>
          <!-- 评论 -->
          <div class="comment" v-if="travels.commentCount > 0">
            <p v-if="travels.commentCount">全部<b>{{travels.commentCount}}</b>条评论</p>
            <ul class="list" v-if="commentList.length > 0">
              <li v-for="item in commentList" :key="item.id">
                <div class="item">
                  <div class="headImg" v-lazy:background-image="item.headUrl" @click.stop="toMyInfo(item.userId)"></div>
                  <div style="width: calc(100% - 70px)">
                    <p style="padding-top: 3px;">{{item.nickname}}</p>
                    <p style="font-size: 12px;">{{item.createAt | personifyTime}}</p>
                  </div>
                  <img :src="moreVert" height="28px" @click.stop="toShowActionSheet(item)"/>
                </div>
                <div class="content">
                  <p>{{item.content}}</p>
                  <p class="replay" v-if="item.replyCount" @click.stop="toShowReply(item)">查看{{item.replyCount}}条回复
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                  </p>
                </div>
              </li>
            </ul>
            <p v-else>快来留下第一条评论吧</p>
          </div>
        </div>
      </scroll>

      <!-- 底部操作按钮 -->
      <!-- <div class="bottom">
        <div class="item" @click.stop="updateMessage(0)">
          <transition name="bounce" enter-active-class="bounceIn" leave-active-class="">
            <i v-if="starType == 1" class="active icon iconfont icon-star-b"></i>
          </transition>
          <i v-if="starType != 1" class="icon iconfont icon-star"></i>
          <span style="font-size: 16px">{{travels.starSum}}</span>
        </div>
        <div class="item" @click="toShowInput(null)">
          <i class="icon iconfont icon-comment"></i>
          <p>回复</p>
        </div>
        <div class="item" @click.stop="updateMessage(1)">
          <i v-if="collectionType == 1"  class="active icon iconfont icon-collection-b"></i>
          <i v-else class="icon iconfont icon-collection"></i>
          <p>收藏</p>
        </div>
        <div class="item" @click.stop="toShare">
          <i class="icon iconfont icon-share"></i>
          <p>分享</p>
        </div>
      </div> -->

      <!-- 目录 -->
      <div v-transfer-dom>
        <popup v-model="showCatalog" position="left" width="80%" height="100%" class="popup-wrapper">
          <p :style="{marginTop: paddingTop + 'px'}" style="padding: 7px 15px; border-bottom: 1px solid #f0f0f0">游记目录</p>
          <ul class="catalog" v-if="showCatalog" >
            <li v-for="item in catalogList" :key="item.index" @click="clickSection(item)">
              <span style="color: #666; font-weight: bold; margin-right: 6px;">{{item.index}}</span>{{item.content}}</li>
          </ul>
        </popup>
      </div>
      <!-- 评论的回复列表 -->
      <div class="reply-wrapper" v-if="showReply" :style="{top: (paddingTop + 10) + 'px'}">
        <div class="head">
          评论详情
          <i class="fa fa-times" aria-hidden="true" @click.stop="showReply = false"></i>
        </div>
        <scroll class="reply-scroll"
          ref="replyScroll"
          :style="{height: replyScrollHeight + 'px'}"
          :data="replyList"
          :pullUpLoad="true"
          @pullingUp="onReplyPullingUp">
          <div class="comment">
            <div class="item">
              <div class="headImg" v-lazy:background-image="currentComment.headUrl"  @click.stop="toMyInfo(currentComment.userId)"></div>
              <div>
                <p style="padding-top: 4px;">{{currentComment.nickname}}</p>
                <p style="font-size: 12px;">{{currentComment.createAt | personifyTime}}</p>
              </div>
            </div>
            <div class="content">
              <p>{{currentComment.content}}</p>
            </div>
          </div>
          <ul class="list" v-if="replyList.length">
            <li v-for="item in replyList" :key="item.id" @click.stop="toShowInput(1, item)">
              <div class="item">
                <div class="headImg" v-lazy:background-image="item.headUrl"  @click.stop="toMyInfo(item.userId)"></div>
                <div>
                  <p style="padding-top: 4px;">{{item.userName}}</p>
                  <p style="font-size: 12px;">{{item.createAt}}</p>
                </div>
              </div>
              <div class="content">
                <p v-if="item.targetType == 0">{{item.comment}}</p>
                <p v-if="item.targetType == 1">回复<font @click.stop="toMyInfo(item.targetUserId)" style="color: #37c3e2">{{item.targetUserName}}</font>: {{item.comment}}</p>
              </div>
            </li>
          </ul>
        </scroll>
        <div class="bottom" :style="{paddingBottom: (paddingBottom + 6) + 'px'}">
          <p @click="toShowInput(0, currentComment)">点击回复{{currentComment.nickname}}的评论</p>
        </div>
      </div>
      <!-- 顶部菜单 -->
      <div class="strategy-mask" v-show="showTopMenu" @click="showTopMenu = false">
        <ul ref="topMenu" class="top-menu" :style="{marginTop: paddingTop + 43 + 'px'}" @click.stop="showTopMenu = false">
          <li v-if="isMe" @click="toDelete"><i class="icon iconfont icon-delete"></i>  删除</li>
          <li @click="toReport(travels.articleType === 0 ? 4 : 5, travels.id, travels.title)"><i class="icon iconfont icon-report"></i>  举报</li>
        </ul>
      </div>
    </template>
    <load-fail v-if="isLoadFail" :tip="tip" style="height: auto; padding-top: 0px; margin-top: 210px;"></load-fail>

    <div v-transfer-dom>
      <previewer :list="atlas" :options="{loop: false}" ref="previewer"></previewer>
    </div>

    <actionsheet
      v-model="showActionSheet"
      :menus="{
        reply: '回复',
        report: '举报'
      }"
      @on-click-menu="clickActionSheet"
      show-cancel>
    </actionsheet>

    <bottom-input ref="bottomInput" v-model="showInput" @send="sendComment" :placeholder="placeholder"></bottom-input>

    <share v-model="showShare" :title="shareContent.title" :desc="shareContent.desc" :thumbUrl="shareContent.thumbUrl" :linkUrl="shareContent.linkUrl"></share>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Share from '@/components/share/share'
import Scroll from '@/components/scroll/scroll'
import BottomInput from '@/components/bottom-input/bottom-input'
import { Popup, TransferDom, Actionsheet } from 'vux'
import Previewer from '@/components/previewer/previewer'
import LoadFail from '@/components/load-fail/load-fail'

import axios from '@/api/axiosApi'
import nativeBridge from '@/assets/js/nativeBridge'
import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX, APP_DOWNLOAD_PATH } from '@/api/config'
import defaultAvatar from '@/assets/img/default_avatar.png'
import moreVert from '@/assets/img/icon/more_vert.png'
import { handleBackMixin, statusBarMixin } from '@/assets/js/mixin'

export default {
  name: 'PlayStrategy',
  mixins: [handleBackMixin, statusBarMixin],
  data() {
    return {
      moreVert,
      statusBarColor: 'white',
      isLoadFail: false,
      tip: '',
      showTopMenu: false,
      showShare: false,
      showCatalog: false,
      showReply: false,
      showInput: false,
      showActionSheet: false,
      isMe: false,
      isFriend: false,
      placeholder: '',
      travels: {},
      catalogList: '',
      headerStyles: {
        color: '#fff',
        background: 'rgba(255, 255, 255, 0)'
      },
      playStrategyCount: 0,
      shareContent: {},
      starType: 0,
      collectionType: 0,
      followStatus: 0,
      commentPageNum: 1,
      commentList: [],
      replyList: [],
      userAddress: '',
      currentComment: null,
      currentReply: null,
      replyType: 0,         // 回复的类型。
      allDisabledBack: true,
      allPopupModels: ['showTopMenu', 'showShare', 'showCatalog', 'showReply', 'showInput', 'showActionSheet']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, Popup, Scroll, Share, Actionsheet, BottomInput, Previewer, LoadFail
  },
  created() {
    this.paddingTop = 24
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingTop = 34
      this.paddingBottom = 44
    }
    if (this.$refs.scroll) {
      this.$refs.scroll.scrollTo(0, 0)
    }
    this.replyScrollHeight = window.innerHeight
    this._getTravels()
     // 刷新一下定位
    const _self = this
    nativeBridge.getPosition(this, (arg, geo) => {
      _self.$store.commit('SET_POSITION', [parseFloat(arg.longitude), parseFloat(arg.latitude)])
      _self.userAddress = geo.formattedAddress
    })
  },
  activated () {
    if (this.travels != null && this.travels.id != null) {
      if (this.travels.id !== this.$route.params.travelsId && this.$refs.scroll) {
        this.$refs.scroll.scrollTo(0, 0)
        this.headerStyles = {
          color: '#fff',
          background: 'rgba(255, 255, 255, 0)'
        }
      }
    }
    this._getTravels()
    // 刷新一下定位
    // const _self = this
    // nativeBridge.getPosition(this, (arg, geo) => {
    //   _self.$store.commit('SET_POSITION', [parseFloat(arg.longitude), parseFloat(arg.latitude)])
    //   _self.userAddress = geo.formattedAddress
    // })
  },
  computed: {
    atlas () {
      if (this.travels.articleContent) {
        const tmp = []
        this.travels.articleContent.forEach((item, index) => {
          if (item.type === 2) {
            tmp.push({
              index: index,
              src: item.content
            })
          }
        })
        return tmp
      }
      return []
    }
  },
  mounted () {
    this.$refs.scroll.$el.style.height = window.innerHeight + 'px'
  },
  methods: {
    _getTravels() {
      axios.get(this, '/v1/playStrategy', {
        id: this.$route.params.travelsId
      }, (data) => {
        if (data == null || data.length === 0) {
          this.headerStyles.color = '#000'
          this.tip = '页面加载失败<br>没有找到该游记攻略，或者该游记攻略已下架'
          this.isLoadFail = true
          this.catalogList = []
          return
        }

        this.isLoadFail = false
        this.headerStyles.color = '#fff'
        let tmpHeadUrl = defaultAvatar
        if (data[0].userHeadUrl) {
          if (data[0].userHeadUrl.indexOf(QINIU_PREFIX) > -1) {
            tmpHeadUrl = data[0].userHeadUrl + '-bheader'
          } else {
            tmpHeadUrl = data[0].userHeadUrl
          }
        }
        if (data[0].firstImg && data[0].firstImg.indexOf(QINIU_PREFIX) > -1) {
          data[0].firstImg += '-w200'
        }

        data[0].userHeadUrl = tmpHeadUrl
        data[0].articleContent = JSON.parse(data[0].articleContent)
        data[0].travelTime = this.moment(data[0].travelTime).format('YYYY/MM/DD')
        this.travels = data[0]

        const userId = localUser.get('id')
        if (userId) {
          this._isFriend(userId, data[0].publishUserId)
          if (userId === data[0].publishUserId) {
            this.isMe = true
          }
        }

        const tmp = []
        data[0].articleContent.forEach((item, index) => {
          if (item.type === 3) {
            tmp.push(Object.assign({}, item, {id: 'section' + index}))
          }
          if (item.content) {
            if (item.content.indexOf(QINIU_PREFIX) > -1) {
              item.content += '-w200'
            }
          }
        })
        tmp.forEach((item, index) => {
          const i = index + 1
          item.index = i > 9 ? i : ('0' + i)
        })
        this.catalogList = tmp
        this._getPlayStrategyCount()
        this._viewTravels()
        this._getStatus()
        this._getCommentList(true)
      }, (e) => {
        this.headerStyles.color = '#000'
        this.tip = '页面加载失败<br>网络错误'
        this.isLoadFail = true
      })
    },
    _getPlayStrategyCount() {
      axios.get(this, '/v1/playStrategyCount', {
        publishUserId: this.travels.publishUserId,
        articleType: this.travels.articleType,
        publish: 1
      }, (data) => {
        this.playStrategyCount = data
      })
    },
    _viewTravels() {
      const userId = localUser.get('id')
      if (userId != null) {
        axios.post(this, '/v1/messageRecord', {
          userId: userId,
          targetId: this.travels.id,
          type: 2
        }, (data) => {
        }, null, false)
      }
    },
    _isFriend(userId, targetUserId) {
      axios.get(this, `/v1/isFriend/${userId}/${targetUserId}`, null, (data) => {
        this.isFriend = data
      }, null, false)
    },
    _getStatus() {
      const userId = localUser.get('id')
      if (userId != null) {
        // 点赞和收藏状态
        axios.get(this, '/v1/messageRecord/' + userId + '/' + this.$route.params.travelsId, null, (data) => {
          if (data) {
            this.starType = data.starType
            this.collectionType = data.collectionType
          }
        }, null, false)
        // 关注状态
        if (userId === this.travels.publishUserId) {
          this.followStatus = -1
        } else {
          axios.get(this, '/v1/follows/', {
            follower: userId,
            following: this.travels.publishUserId
          }, (data) => {
            if (data.length > 0 && data[0].valid === 1) {
              this.followStatus = 1
            } else {
              this.followStatus = 0
            }
          }, null, false)
        }
      }
    },
    _getCommentList (isFirst) {
      const _self = this
      axios.get(this, '/v1/playStrategyRecord/' + this.$route.params.travelsId, {
        pageSize: 5,
        pageNum: _self.commentPageNum
      }, (data) => {
        if (data.length === 0) {
          if (_self.commentPageNum > 1) {
            _self.commentPageNum--
          }
          if (isFirst !== true) {
            _self.$refs.scroll.hiddenPullUpLoad()
          }
        } else {
          data.forEach(item => {
            let tmpHeadUrl = defaultAvatar
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                tmpHeadUrl = item.headUrl + '-bheader'
              } else {
                tmpHeadUrl = item.headUrl
              }
            }
            item.headUrl = tmpHeadUrl
          })
          if (_self.commentPageNum <= 1) {
            _self.commentList = data
          } else {
            _self.commentList = _self.commentList.concat(data)
          }
        }
      }, null, false)
    },
    _getReplyList(isFirst) {
      const _self = this
      axios.get(this, '/v1/reply/' + this.currentComment.id, {
        pageNum: _self.replyPageNum,
        pageSize: 10
      }, (data) => {
        if (data.length === 0) {
          if (_self.replyPageNum > 1) {
            _self.replyPageNum--
          }
          if (isFirst !== true) {
            _self.$refs.replyScroll.hiddenPullUpLoad()
          }
        } else {
          data.forEach(item => {
            let tmpHeadUrl = defaultAvatar
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                tmpHeadUrl = item.headUrl + '-bheader'
              } else {
                tmpHeadUrl = item.headUrl
              }
            }
            item.headUrl = tmpHeadUrl
          })
          if (_self.replyPageNum <= 1) {
            _self.replyList = data
          } else {
            _self.replyList = _self.replyList.concat(data)
          }
        }
      })
    },
    toShowAtlas (index) {
      // 预览图片
      const findIndex = this.atlas.findIndex(o => o.index === index)
      this.$refs.previewer.show(findIndex)
    },
    changeFollowStatus(targetUserId) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      if (userId === targetUserId) {
        this.$vux.toast.text('自己不能加自己！', 'middle')
        return
      }
      const valid = this.followStatus === 0 ? 1 : 0
      this.followStatus = valid
      this.sendRequest = true
      const _self = this
      axios.post(this, `/v1/follow/${userId}/${targetUserId}/${valid}`, null, (data) => {
        _self.sendRequest = false
        if (valid) {
          this.$vux.toast.text('加好友请求发送成功', 'middle')
          axios.post(this, '/v1/pushAlias', {
            userId: targetUserId,
            content: `${localUser.get('nickname')}刚刚加你为好友，赶快去看一看吧~`,
            linkUrl: `/user/newfriends`
          })
        }
      }, null, false)
    },
    updateMessage(optType) {
      // 0 点赞  1 收藏
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      if (this.travels == null) {
        return
      }
      if (optType === 0 && this.starType) {
        // 禁止取消点赞
        this.$vux.toast.text('你已经点赞过了~', 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      let params = {
        userId: userId,
        targetId: this.travels.id,
        type: this.travels.articleType === 0 ? 2 : 3
      }
      if (optType === 0) {
        params.starType = this.starType === 0 ? 1 : 0
      } else {
        params.collectionType = this.collectionType === 0 ? 1 : 0
      }
      const _self = this
      this.sendRequest = true
      axios.post(this, '/v1/messageRecord', params, (data) => {
        _self.sendRequest = false
        if (optType === 0) {
          _self.starType = params.starType
          params.starType === 0 ? _self.travels.starSum-- : _self.travels.starSum++
        } else {
          this.collectionType = params.collectionType
          params.collectionType === 0 ? _self.travels.collectionSum-- : _self.travels.collectionSum++
        }
      }, () => {
        _self.sendRequest = false
      }, false)
    },
    toShowActionSheet (target) {
      this.currentComment = target
      this.showActionSheet = true
    },
    clickActionSheet(item) {
      if (item === 'reply') {
        this.toShowInput(0)
      } else if (item === 'report') {
        this.toReport(this.travels.articleType === 0 ? 101 : 102, item.id, this.currentComment.content)
      }
    },
    onReplyPullingUp() {
      this.replyPageNum++
      this._getReplyList()
    },
    toShowInput(type, target) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      this.showInput = true
      this.replyType = type
      if (type === 0) {
        // 评论
        this.placeholder = '回复 ' + this.currentComment.nickname + ' 的评论'
      } else if (type === 1) {
        // 回复
        this.currentReply = target
        this.placeholder = '回复 ' + target.userName
      } else {
        this.currentComment = null
        this.currentReply = null
        this.placeholder = '发布你的精彩评论...'
      }
    },
    toShowReply(item) {
      this.currentComment = item
      this.replyPageNum = 1
      this._getReplyList(true)
      this.showReply = true
    },
    sendComment (val) {
      const t = val
      if (t.replace(/\s/g, '') === '') {
        this.$vux.toast.text('消息不能为空', 'middle')
        return
      }
      const user = localUser.get()
      const _self = this
      if (this.replyType == null) {
        // 评论
        let params = {
          playStrategyId: _self.$route.params.travelsId,
          userId: user.id,
          content: val
        }
        // 经纬度
        const position = this.$store.getters.position
        if (position.length === 2) {
          params.longitude = position[0]
          params.latitude = position[1]
          params.commentLocation = _self.userAddress
        }
        axios.post(this, '/v1/playStrategyRecord', params, (data) => {
          data.createAt = '刚刚'
          data.nickname = user.nickname
          data.headUrl = user.headUrl || defaultAvatar
          _self.commentList.splice(0, 0, data)

          _self.showInput = false
          _self.travels.commentCount++
          _self.$refs.bottomInput.setContent('')
          _self.$vux.toast.text('评论成功', 'middle')
          axios.post(_self, '/v1/pushAlias', {
            userId: _self.travels.publishUserId,
            content: `${localUser.get('nickname')}评论了你的游记：${val}`,
            linkUrl: `/address/travels/${_self.$route.params.travelsId}`
          })
        })
      } else {
        // 回复
        let params = {
          replyType: _self.travels.articleType === 0 ? 3 : 4,
          targetId: _self.travels.id,
          targetType: _self.replyType,
          userId: user.id,
          comment: val,
          targetCommentId: _self.currentComment.id
        }
        if (_self.currentComment != null) {
          // 回复 评论
          params.targetUserId = _self.currentComment.userId
        } else if (_self.currentReply != null) {
          // 回复 回复
          params.targetUserId = _self.currentReply.userId
        }
        // 经纬度
        const position = this.$store.getters.position
        if (position.length === 2) {
          params.longitude = position[0]
          params.latitude = position[1]
          params.commentLocation = _self.userAddress
        }
        axios.post(this, '/v1/reply/', params, (data) => {
          _self.showInput = false
          _self.travels.commentCount++
          _self.$refs.bottomInput.setContent('')
          _self.$vux.toast.text('回复成功', 'middle')
          for (let i = 0; i < _self.commentList.length; i++) {
            const item = _self.commentList[i]
            if (item.id === _self.currentComment.id) {
              item.replyCount++
            }
          }
          data.createAt = '刚刚'
          data.userName = user.nickname
          if (_self.currentReply) {
            data.targetUserName = _self.currentReply.userName
          }
          data.headUrl = user.headUrl || defaultAvatar
          if (_self.currentReply != null) {
            _self.replyList.splice(0, 0, data)
          }

          axios.post(_self, '/v1/pushAlias', {
            userId: params.targetUserId,
            content: `${localUser.get('nickname')}回复了你：${val}`,
            linkUrl: `/address/travels/${_self.$route.params.travelsId}`
          })
        })
      }
    },
    toMyInfo(userId) {
      this.$router.push(`/user/archives/${userId}`)
    },
    toShare() {
      this.showShare = true
      this.shareContent = {
        title: this.travels.title,
        desc: this.travels.intro.substr(0, 30),
        thumbUrl: this.travels.firstImg + '-w200',
        linkUrl: APP_DOWNLOAD_PATH
      }
    },
    toOpenMenu () {
      this.showTopMenu = true
      this.$refs.topMenu.style.height = 0

      setTimeout(() => {
        let height = 0
        for (let i = 0; i < this.$refs.topMenu.children.length; i++) {
          const element = this.$refs.topMenu.children[i]
          height += element.offsetHeight
        }
        this.$refs.topMenu.style.height = height + 'px'
      }, 20)
    },
    toDelete() {
      const _self = this
      this.$vux.confirm.show({
        title: `确定要删除该${_self.travels.articleType === 0 ? '游记' : '攻略'}吗？`,
        confirmText: '确定',
        cancelText: '取消',
        onCancel () {
        },
        onConfirm () {
          axios.delete(_self, '/v1/playStrategy/' + _self.$route.params.travelsId, null, () => {
            _self.$vux.toast.text('删除成功', 'middle')
            _self.$router.go(-1)
          })
        }
      })
    },
    toReport (type, id, title) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      this.$router.push({
        path: `/commonReport/${type}/${id}`,
        query: {
          title: title
        }
      })
    },
    scroll(position, directionY) {
      if (position.y <= -(180 - this.paddingTop - 40)) {
        this.headerStyles = {
          color: '#000',
          background: 'rgba(255, 255, 255, 1)'
        }
        this.statusBarColor = 'black'
      } else {
        this.headerStyles = {
          color: '#fff',
          background: `rgba(255, 255, 255, ${Math.abs(position.y / 180)})`
        }
        if (Math.abs(position.y / 180) > 0.88) {
          this.headerStyles.color = '#000'
          this.statusBarColor = 'black'
        } else {
          this.statusBarColor = 'white'
        }
      }
    },
    clickSection (section) {
      this.showCatalog = false
      this.$refs.scroll.scrollToElement(document.getElementById(section.id), 200, true, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl';

.strategy-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: #ffffff;
  z-index: 101;
  overflow-y: scroll
  -webkit-overflow-scrolling: touch;

  .header-right {
    line-height: 25px;
    i {
      font-size: 18px;
    }
    .more {
      font-size: 21px;
      padding-left: 12px;
      padding-right: 3px;
    }
  }

  .firstImg {
    position: relative;
    height: 260px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .travels-title {
    font-size: 24px;
    font-weight: bold;
    padding: 12px;
    margin-top: 15px;
    font-family: 'SimHei';
  }

  .travels-content {
    img {
      width: 100%;
      height: auto;
    }

    .block {
      margin: 12px;
    }

    .section {
      position: relative;
      font-size: $font-size-large;
      font-weight: bold;
      margin-top: 20px;
    }

    .text {
      position: relative;
      font-size: $font-size-title;
      white-space: pre-wrap;
      text-align justify
    }

    .edit {
      position: absolute;
      right: 15px;
      color: blue;
    }

    .divider {
      height: 45px;
      padding: 0;
      line-height: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .select-item {
        display: flex;
        align-items: center;
        padding: 0 7px;
      }

      img {
        width: 30px;
      }
    }
  }

  .authorInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 12px;
    .user {
      width: calc(100% - 90px);
      display: flex;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .info {
        width: calc(100% - 51px)
        border-right: 1px solid $color-border;
        padding: 0 9px;
        p{
          white-space: nowrap;
          overflow: hidden;
          text-overflow:ellipsis;
        }
      }
    }
    .address {
      width: 90px;
      font-size: 24px;
      text-align: center;
    }
    .litter-button {
      padding: 0 11px;
      width: fit-content;
      height: 18px;
      line-height: 18px;
      border: 1px solid $color-theme;
      border-radius: 3px;
      color: $color-theme;
      font-size: $font-size-small;
      float: right;
    }
  }

  .travelInfo {
    border: 1px solid $color-border;
    margin: 12px 12px 20px 12px;
    padding: 12px 9px 9px 9px;
    position: relative;
    font-size: $font-size-desc;
    font-weight: 100;
    color: #333;
    &:before{
      content: '我的出行信息';
      font-size: $font-size-small;
      background: #ffffff;
      position: absolute;
      top: -12px;
      left: 18px;
      padding: 3px 5px;
      display: block;
    }
    .item {
      display: inline-block;
    }
  }

  .comment {
    padding: 12px;
    .list {
      li {
        padding: 5px 0;

        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 1.2;
          color: #666;
          font-size: $font-size-desc;
          overflow: hidden;

          .headImg {
            width: 32px;
            min-width: 32px;
            height: 32px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-size: cover;
            margin-right: 7px;
          }
        }

        .content {
          color: $color-text-1;
          padding-top: 3px;
          padding-bottom: 7px;
          margin-left: 43px;
          font-size: $font-size-desc;
          border-bottom: 1px solid #f0f0f0;
        }

        .replay {
          background-color: $color-background;
          border-radius: 3px;
          position: relative;
          padding: 9px;
          margin-top: 8px;
          line-height: 1;
          color: $color-theme;
          font-size: $font-size-small;

          &:before {
            content: ' ';
            position: absolute;
            left: 9px;
            bottom: 100%;
            border: 6px solid transparent;
            border-bottom-color: $color-background;
          }
        }
      }
    }
  }

  .bottom {
    display: flex;
    text-align: center;
    align-self: center;
    color: #333;
    height: 40px;
    line-height: 1;
    padding: 5px 0;
    box-shadow: 0 0 7px #e6e6e6;
    .item {
      flex: 1;
      font-size: $font-size-desc;
      border-right: 1px solid $color-border;
      p {
        line-height: 1;
        margin-top: 3px;
      }
      i {
        font-size: 21px;
      }
      .active {
        color: $color-theme;
      }
      &:first-child {
        line-height: 40px;
        p {
          margin: 0;
        }
      }
      &:last-child {
        border-right: none;
      }
    }
  }

  .reply-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #333;
    z-index: 201;
    .head {
      padding: 9px 12px;
      text-align: center;
      position: relative;
      i {
        position: absolute;
        padding: 6px;
        font-size: 18px;
        top: 4px;
        right: 12px;
      }
    }

    .reply-scroll {
      .comment {
        padding: 0 12px;
        .item {
          display: flex;
          align-content: center;
          line-height: 1.2;
          color: #666;
          font-size: $font-size-desc;
          .headImg {
            width: 36px;
            min-width: 36px;
            height: 36px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-size: cover;
            margin-right: 7px;;
          }
        }
        .content {
          color: $color-text-1;
          padding-top: 3px;
          padding-bottom: 7px;
          margin-left: 43px;
          font-size: $font-size-desc;
        }
      }
      .list {
        padding: 0 12px;
        background: $color-background;
        li {
          padding: 5px 0;
          &:last-child .content{
            border: none;
          }
          .item {
            display: flex;
            align-content: center;
            line-height: 1.2;
            color: #666;
            font-size: $font-size-desc;
            .headImg {
              width: 36px;
              min-width: 36px;
              height: 36px;
              border-radius: 50%;
              background-repeat: no-repeat;
              background-size: cover;
              margin-right: 7px;;
            }
          }
          .content {
            color: $color-text-1;
            padding-top: 3px;
            padding-bottom: 7px;
            margin-left: 43px;
            font-size: $font-size-desc;
            border-bottom: 1px solid #e2dfdf;
          }
        }
      }
    }

    .bottom {
      padding: 6px 12px;
      text-align: center;
      background: $color-background;
      display: flex;
      justify-content: center;
      border-top: 1px solid $color-border;
      overflow: hidden;
      p {
        color: #666;
        border-radius: 23px;
        padding: 0 15px;
        line-height: 40px;
        width: 60%;
        box-shadow: 0 0 6px $color-border;
        background: #fff;
        overflow: hidden;
      }
    }
  }

  .strategy-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: 105;
    display: flex;
    justify-content: flex-end;
    .top-menu {
      background: #fff;
      padding: 12px 0;
      width: 85px;
      margin-right: 15px;
      border-radius: 3px;
      box-shadow: 0 0 15px rgba(141, 141, 141, 0.6);
      height: fit-content;
      transition: height .2s;
      li {
        padding: 0 9px;
        height: 32px;
        line-height: 32px;
        border-bottom: 1px solid #f8f8f8;
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
.popup-wrapper {
  background: #fff;
  ul {
    list-style: none;
  }

  .catalog {
    padding: 0 15px;
    list-style: none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 60px)
    li {
      padding: 12px 0;
      font-size: $font-size-desc;
      border-bottom: 1px solid $color-border;
      &:last-child {
        border-bottom: none;
      }
      &:first-child {
        margin-top: 12px;
      }
    }
  }
}
</style>
